<template>
  <div class="header">
    <!--web-->
    <div class="web" v-if="$store.state.type == 1">
      <!--logo-->
      <div class="logo">
        <img src="../assets/common/logo.png" class="logo-img">
        <div class="logo-right">
          <div class="title">丽晶微电子</div>
          <div class="subtitle">L E A D S T A R</div>
        </div>
      </div>

      <!--导航-->
      <nav class="nav">
        <div class="nav-item"
             :class="{active:item.router === $route.fullPath || ($route.fullPath.includes(item.router) && item.router !== '/')}"
             v-for="item in nav" :key="item.id"
             @click="$router.push(item.router)">
          {{ item.name }}
        </div>
      </nav>

      <!--电话-->
      <div class="phone">
        <img src="../assets/common/phone.png" class="phone-img">
        <div class="phone-right">
          <div class="title">服务热线</div>
          <div class="subtitle">400-8200-567</div>
        </div>
      </div>
    </div>

    <!--phone-->
    <div v-else>
      dsada
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      type:'web',
      show: false,
      nav:[
        {name: '首页', router: '/'},
        {name: '企业新闻', router: '/news'},
        {name: '丽晶事业', router: '/cause'},
        {name: '技术分享', router: '/share'},
        {name: '关于利晶', router: '/about'},
      ]
    }
  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
@mixin flex() {
  display: flex;
  align-items: center;
}
.header{
  position: relative;
  height: 89px;
  .web {
    width: 100vw;
    height: 89px;
    position: fixed;
    padding-left: calc((100vw - 1200px)/2);
    padding-right: calc((100vw - 1200px)/2);
    background: rgba(255,255,255,1);
    z-index: 9999;
    @include flex();

    .icon {
      display: none;
    }

    .logo {
      height: 100%;
      margin-left: 20px;
      @include flex();

      .logo-img {
        margin-right: 20px;
      }

      .logo-right {
        font-weight: bold;
        color: #083F8F;

        .title {
          font-size: 25px;
          margin-bottom: 8px;
        }

        .subtitle {
          width: 124px;
          text-align: justify;
          text-align-last: justify;
          font-size: 15px;
        }
      }
    }

    .nav {
      margin-left: 250px;
      margin-right: 80px;
      width: 500px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .nav-item {
        font-size: 17px;
        line-height: 84px;
        border-bottom: 5px solid transparent;
        cursor: pointer;
      }

      .active {
        font-weight: bold;
        color: #083F8F;
        border-bottom: 5px solid #005BDF;
      }
    }

    .phone {
      height: 100%;
      @include flex();

      .phone-img {
        margin-right: 18px;
      }

      .phone-right {
        font-weight: bold;
        color: #083F8F;

        .title {
          margin-bottom: 8px;
        }

        .title,
        .subtitle {
          font-size: 18px;
          width: 130px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }
  }
}

</style>
